<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A simple jQuery datepicker plugin.">
  <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, datepicker, front-end, frontend, web development">
  <meta name="author" content="Fengyuan Chen">
  <title>Datepicker</title>
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/datepicker.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <!-- header -->
  <header class="navbar navbar-static-top docs-header" id="top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="./">Datepicker</a>
      </div>
      <nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://github.com/fengyuanchen/datepicker/blob/master/README.md">Docs</a></li>
          <li><a href="https://github.com/fengyuanchen/datepicker">GitHub</a></li>
          <li><a href="http://chenfengyuan.com">About</a></li>
          <li><a href="http://fengyuanchen.github.io">More</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Jumbotron -->
  <div class="jumbotron docs-jumbotron">
    <div class="container">
      <h1>Datepicker</h1>
      <p class="lead">A simple jQuery datepicker plugin.</p>
    </div>
  </div>

  <!-- Content -->
  <div class="container">
    <h1 class="page-header">Overview</h1>
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <h3 class="page-header">Demo</h3>
        <div class="docs-datepicker">
          <div class="input-group">
            <input type="text" class="form-control docs-date" name="date" placeholder="Pick a date">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default docs-datepicker-trigger" disabled>
                <i class="glyphicon glyphicon-calendar" aria-hidden="true"></i>
              </button>
            </span>
          </div>
          <div class="docs-datepicker-container"></div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <h3 class="page-header">Options</h3>
        <div class="docs-options">
          <div class="input-group">
            <span class="input-group-addon" id="option-date">date</span>
            <input type="text" class="form-control" name="date" value aria-describedby="option-date" placeholder="null">
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-format">format</span>
            <input type="text" class="form-control" name="format" value="mm/dd/yyyy" aria-describedby="option-format" placeholder="mm/dd/yyyy">
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-startDate">startDate</span>
            <input type="text" class="form-control" name="startDate" aria-describedby="option-startDate" placeholder="null">
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-endDate">endDate</span>
            <input type="text" class="form-control" name="endDate" aria-describedby="option-endDate" placeholder="null">
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-language">language</span>
            <select class="form-control" id="option-language" name="language">
              <option value="en-US" selected>en-US</option>
              <option value="en-GB">en-GB</option>
              <option value="zh-CN">zh-CN</option>
            </select>
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-startView">startView</span>
            <select class="form-control" id="option-startView" name="startView">
              <option value="0" selected>0</option>
              <option value="1">1</option>
              <option value="2">2</option>
            </select>
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-weekStart">weekStart</span>
            <select class="form-control" id="option-weekStart" name="weekStart">
              <option value="0" selected>0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
            </select>
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-offset">offset</span>
            <input type="number" class="form-control" name="offset" value="10" aria-describedby="option-offset" placeholder="offset">
          </div>
          <div class="input-group">
            <span class="input-group-addon" id="option-zIndex">zIndex</span>
            <input type="number" class="form-control" name="zIndex" value="1" aria-describedby="option-zIndex" placeholder="zIndex">
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <h3 class="page-header">Toggles</h3>
        <div class="docs-toggles">
          <ul class="list-group">
            <li class="list-group-item">
              <label class="checkbox-inline">
                <input type="checkbox" name="container"> container
              </label>
            </li>
            <li class="list-group-item">
              <label class="checkbox-inline">
                <input type="checkbox" name="trigger"> trigger
              </label>
            </li>
            <li class="list-group-item">
              <label class="checkbox-inline">
                <input type="checkbox" name="inline"> inline
              </label>
            </li>
            <li class="list-group-item">
              <label class="checkbox-inline">
                <input type="checkbox" name="autoshow"> autoshow
              </label>
            </li>
            <li class="list-group-item">
              <label class="checkbox-inline">
                <input type="checkbox" name="autohide"> autohide
              </label>
            </li>
            <li class="list-group-item">
              <label class="checkbox-inline">
                <input type="checkbox" name="autopick"> autopick
              </label>
            </li>
            <li class="list-group-item">
              <label class="checkbox-inline">
                <input type="checkbox" name="yearFirst"> yearFirst
              </label>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <h3 class="page-header">Methods</h3>
        <div class="docs-actions">
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary" data-method="getDate" data-target="#putDate">Get Date</button>
            </div>
            <input type="text" class="form-control" id="putDate">
          </div>
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary" data-arguments="[true]" data-method="getDate" data-target="#putDateFormatted">Get Date (formatted)</button>
            </div>
            <input type="text" class="form-control" id="putDateFormatted">
          </div>
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary" data-method="getMonthName" data-target="#putMonthName">Get Month Name</button>
            </div>
            <input type="text" class="form-control" id="putMonthName">
          </div>
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary" data-arguments="[true]" data-method="getMonthName" data-target="#putMonthNameShort">Get Month Name (short)</button>
            </div>
            <input type="text" class="form-control" id="putMonthNameShort">
          </div>
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary" data-method="getDayName" data-target="#putDayName">Get Day Name</button>
            </div>
            <input type="text" class="form-control" id="putDayName">
          </div>
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary" data-arguments="[true]" data-method="getDayName" data-target="#putDayNameShort">Get Day Name (short)</button>
            </div>
            <input type="text" class="form-control" id="putDayNameShort">
          </div>
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary" data-arguments="[false, true]" data-method="getDayName" data-target="#putDayNameMin">Get Day Name (min)</button>
            </div>
            <input type="text" class="form-control" id="putDayNameMin">
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="show">Show</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="hide">Hide</button>
            </div>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="pick">Pick</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="update">Update</button>
            </div>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="reset">Reset</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="destroy">Destroy</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="docs-footer">
    <div class="container">
      <span class="hearts"></span>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="../assets/js/jquery.min.js"></script>
  <script src="../assets/js/bootstrap.min.js"></script>
  <script src="../dist/datepicker.js"></script>
  <script src="../i18n/datepicker.en-GB.js"></script>
  <script src="../i18n/datepicker.zh-CN.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
